<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>

    <div style="margin-top: 10px">
      <Suspense>
        <template #default>
          <girl-show />
        </template>
        <template #fallback>
          <h1>Loading...</h1>
        </template>
      </Suspense>
    </div>

    <div>
      <div>{{ nowTime }}</div>
      <button @click="getNowTime">显示时间</button>
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue';
import GirlShow from '@/components/GirlShow.vue';
import { nowTime, getNowTime } from "../hooks/useNowTime";

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
    GirlShow,
  },
  setup() {
    return {
      nowTime,
      getNowTime,
    };
  }
});
</script>
